<script setup lang="ts">
import {ref, provide} from 'vue'
import {
  QueryType,
  type TableData,
  type AnyData
} from '../../types/DataTypes.ts'
import {DataKey} from "../../types/KeyTypes.ts";
import ModuleSelect from "./module/ModuleSelect.vue";
import InfoQuery from "./module/InfoQuery.vue";
import ResultTable from "./module/ResultTable.vue";
import DataInsert from "./module/DataInsert.vue";
import DataEdit from "./module/DataEdit.vue";
import Reservation from "./module/Reservation.vue";
import { useRouter } from 'vue-router'
import { useAuthStore } from '../../stores/authStore'

// 使用Pinia store
const authStore = useAuthStore()
const router = useRouter()
const handleLogout = () => {
  authStore.logout()
  router.push({ name: 'Login' })
}

const queryType = ref<QueryType>(QueryType.FlightQuery);
const handleSelect = (val: QueryType) => {
  queryType.value = val;
}
const showResult = ref(false);
const handleShow = (val: boolean) => {
  showResult.value = val;
}
const loading = ref(false)
const handleLoad = (val: boolean) => {
  loading.value = val;
}
const showInsert = ref(false)
const handleInsert = (newVal:boolean)=>{
  showInsert.value = newVal;
}
const showEdit = ref(false)
const editingData = ref<AnyData>();
const handleEdit = (newVal:boolean,rowData?:AnyData) => {
  showEdit.value = newVal;
  if (!rowData) return;
  editingData.value = rowData;
}
const showReservation = ref(false)
const reservationData = ref<AnyData>();
const handleReservation = (newVal:boolean, rowData?:AnyData) => {
  showReservation.value = newVal;
  if (!rowData) return;
  reservationData.value = rowData;
}

const tableData = ref<TableData>({
  busData: [],
  flightData: [],
  hotelData: [],
  customerData: [],
  reservationData: []
})
const isNeedUpdate = ref<boolean>(false);
const updateData = (newData: TableData): void => {
  isNeedUpdate.value = false;
  tableData.value = newData;
}
provide(DataKey,{
  isNeedUpdate,
  updateData,
})
</script>

<template>
  <div class="query-container">
    <div class="query-header">
      <h2>预约查询</h2>
      <div class="user-info">
        <span>欢迎，{{ authStore.getCustomerName }}</span>
        <el-button @click="handleLogout"  class="logout-btn">退出登录</el-button>
      </div>
    </div>

<!--    模块选择    -->
  <module-select
      @selection-change="handleSelect"
  />

<!--    查询表单    -->
  <info-query
      :query-type="queryType"
      @show="handleShow"
      @load="handleLoad"
      @insert="handleInsert"
      @query="(data)=>{tableData = data}"
  />

<!--    数据插入    -->

<DataInsert
    :query-type="queryType"
    :show-insert="showInsert"
    @cancel="handleInsert"
/>

<!--    结果表格    -->
  <result-table
      :query-type="queryType"
      :data="tableData"
      :loading="loading"
      :show-results="showResult"
      @edit="handleEdit"
      @reservation="handleReservation"
  />

<!--    编辑页面    -->
    <DataEdit
        :query-type="queryType"
        :show-edit="showEdit"
        :editing-data="editingData"
        @cancel="handleEdit"
    />

<!--    预约界面    -->
    <Reservation
        :query-type="queryType"
        :show-reservation="showReservation"
        :reservation-data="reservationData"
        @cancel="handleReservation"
    />
  </div>
</template>

<style scoped>
.query-container {
  padding: 20px;
  background-color:#ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.query-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #535bf2;
}

.logout-btn {
  padding: 8px 16px;
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.logout-btn:hover {
  background-color: #e65c5c;
}

.query-header h2 {
  margin: 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.query-header p {
  margin: 5px 0 0;
  color: #909399;
  font-size: 14px;
}
</style>